<template>
<div class="container">
  <headers :title="title" :refresh="isRefresh" :path="path"></headers>
  <div class="content">
    <div class="list-block inset">
      <ul>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">现有</div>
            <div class="item-input input-before">
              <input type="number" v-model="userInfo.currentGold" readonly />
            </div>
            <div class="item-input input-after">蚂蚁币</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-inner">
            <div class="item-title label">需充值</div>
            <div class="item-input input-before">
              <input type="number" v-model="price" />
            </div>
            <div class="item-input input-after">蚂蚁币</div>
          </div>
        </li>
      </ul>
      <div class="item-inner color-light" id="cue">
        <!-- <div>请注意：累计充值100元才可以发布任务，防止恶意发布人发布违规任务，所做限制，敬请谅解</div> -->
      </div>
    </div>
    <div class="content-block">
      <div class="col-50">
        <a class="button button-big button-fill" @click="chongzhi('ali')">
          <img src="../assets/images/public/zfbcz.png">
        </a>
        <a class="button button-big button-fill button-success" @click="chongzhi('wx')">
          <img src="../assets/images/public/wxcz.png">
        </a>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import store from '../assets/js/store.min.js'

export default {
  ready () {
    $.init()
    this.getUserInfo()
  },
  data () {
    return {
      title: '充值',
      path: '/home',
      isRefresh: false,
      price: 0,
      customerId: store('customerId') || 0,
      userInfo: []
    }
  },
  methods: {
    getUserInfo () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findCustomer', {
        params: {
          customerId: this.customerId
        }
      }).then((data) => {
        this.$set('userInfo', data.data)
      })
    },
    chongzhi (type) {
      let u = navigator.userAgent
      if (!!u.match(/AppleWebKit.*Mobile.*/) && (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1)) {
        try {
          // $.alert('Android ' + type + 'pay')
          window.Android.pay(this.price, type)
        }
        catch (e) {
          console.warn(e)
        }
      }
      if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        try {
          // $.alert('iOS ' + type + 'pay')
          window.webkit.messageHandlers.pay.postMessage([this.price, type])
        }
        catch (e) {
          console.warn(e)
        }
      }
    }
  },
  components: {
    Headers
  }
}
</script>

<style scoped>
#cue{margin-bottom:8rem;padding-left:0;padding-right:0;}
.button{margin-top:1rem;}
.button img{height:25px;margin-top:12px;}
.list-block .item-title.label{width:25%;}
.input-before input{text-align:right;}
.input-after{width:30%;text-align:right;}
</style>